<template>
  <div class="header">
    <nav v-if="userType=='0'">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="2"><router-link to="/user" class="white">用户</router-link></el-menu-item>
        <el-submenu index="3" >
          <template slot="title">加盟商管理</template>
          <el-menu-item index="3-1"><router-link to="/franchiseesManage" class="white">加盟商维护</router-link></el-menu-item>
          <el-menu-item index="3-2"><router-link to="/group" class="white">分组维护</router-link></el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">课件管理</template>
          <el-menu-item index="4-1"><router-link to="/courseKeep" class="white">课件维护</router-link></el-menu-item>
          <el-menu-item index="4-2"><router-link to="/courseStatistic" class="white">课件统计</router-link></el-menu-item>
        </el-submenu>
        <el-menu-item index="5"><router-link to="/video" class="white">公开课视频管理</router-link></el-menu-item>

        <el-menu-item index="7"><router-link to="/news" class="white">新闻管理</router-link></el-menu-item>

        <el-menu-item index="8"><router-link to="/banner" class="white">Banner管理</router-link></el-menu-item>

        <el-submenu index="9" class="right">
          <template slot="title">
              {{username}}
          </template>
          <el-menu-item index="9-1" @click="userExit">退出</el-menu-item>
        </el-submenu>

        <div class="right userPicture" :style="[{'background':`url(${userImg}) no-repeat center`,'background-size': 'cover'}]"></div>

        
      </el-menu>
    </nav>
    
    <nav v-if="userType=='1'">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1"><router-link to="/courseKeep" class="white">我的课件</router-link></el-menu-item>
        <el-menu-item index="2"><router-link to="/courseStatistic" class="white">课件统计</router-link></el-menu-item>
       
        <el-menu-item index="3"><router-link to="/video" class="white">公开课视频</router-link></el-menu-item>

        <el-menu-item index="4"><router-link to="/news" class="white">新闻</router-link></el-menu-item>

        <el-submenu index="5" class="right">
          <template slot="title">
              {{username}}
          </template>
          <el-menu-item index="5-1"><router-link to="/userSelf" class="white">用户信息</router-link></el-menu-item>
          <el-menu-item index="5-2" @click="userExit">退出</el-menu-item>
        </el-submenu>

        <div class="right userPicture" :style="[{'background':`url(${userImg}) no-repeat center`,'background-size': 'cover'}]"></div>

        
      </el-menu>
    </nav>
 </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex2: '1'
      };
    },
    computed: {
      username(){
        return this.$store.state.user.userName
      },
      userImg(){
        return this.$store.state.user.userImg
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      setUser(){
        // this.$store.commit("setUser",res.DATA)    将数据状态存储到vuex 
        this.$store.commit("setUsername",localStorage.userName)    
        this.$store.commit("setUserImg",localStorage.userImg)    
      },
      userExit(){
        window.localStorage.removeItem('token')
        window.localStorage.removeItem('userName')
        window.localStorage.removeItem('userImg')
        window.localStorage.removeItem('userType')


        window.localStorage.removeItem('phone')
        window.localStorage.removeItem('introduce')
        window.localStorage.removeItem('address')
        window.localStorage.removeItem('headImg')


        var that = this
        that.$router.push("/login")
        // this.setUser()
      }
    },
    created(){
      this.userType = localStorage.userType
      this.setUser()
    }
  }
</script>

<style scoped>
.el-menu {
    border-right: solid 1px #e6e6e6;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: #FFF;
    padding: 0 10%;
}
.white{
    color: #ccc;
    display: inline-block;
    width: 100%;
}
.a{
    display: inline-block;
    width: 100%;
}
.right{
  float: right;
}
.userPicture{
  width: 40px;
  height: 40px;
  display: inline-block;
  position: relative;
  top: 10px;
  border-radius: 50%;
}
</style>